<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :footer="null"
    cancelText="关闭">

    <table id="table_report" class="table table-striped table-bordered table-hover">

      <tr>
        <td style="width:90px;text-align: right;padding-top: 80px;">基本信息:</td>
        <td>
          <p style="float: left;">


            停车场编号：<span id="parkCode">
           {{result.parkCode }}
                    </span><br>


            停车场名称：<span id="parkName">
           {{result.parkName }}
                    </span><br>

            操作类型：<span id="optionsType" v-text="custOptionsType(result.optionsType)">
                    </span><br>


            金额(元)：<span id="payTheFee">
           {{result.payTheFee }}
                    </span><br>


<!--            月卡信息表id：<span id="monthlyCardId">-->
<!--           {{result.monthlyCardId }}-->
<!--                    </span><br>-->


            月租编号：<span id="monthlyCode">
           {{result.monthlyCode }}
                    </span><br>


<!--            套餐id：<span id="packageId">-->
<!--           {{result.packageId }}-->
<!--                    </span><br>-->


            套餐名称：<span id="packageName">
           {{result.packageName }}
                    </span><br>


            客户姓名：<span id="userName">
           {{result.userName }}
                    </span><br>


<!--            部门id：<span id="monthlyDepartmentId">-->
<!--           {{result.monthlyDepartmentId }}-->
<!--                    </span><br>-->


            部门名称：<span id="monthlyDepartmentName">
           {{result.monthlyDepartmentName }}
                    </span><br>


<!--            通行权限id：<span id="throughAuthorityId">-->
<!--           {{result.throughAuthorityId }}-->
<!--                    </span><br>-->


            通行权限名称：<span id="throughAuthorityName">
           {{result.throughAuthorityName }}
                    </span><br>


            操作前车牌信息：<span id="beforePlateNos" style="width:600px;display:block;">
           {{result.beforePlateNos }}
                    </span><br>


            操作前车位信息：<span id="beforeParkNumbers" style="width:600px;display:block;">
           {{result.beforeParkNumbers }}
                    </span><br>


            车牌信息：<span id="plateNos" style="width:600px;display:block;">
           {{result.plateNos }}
                    </span><br>


            车位信息：<span id="parkNumbers" style="width:600px;display:block;">
           {{result.parkNumbers }}
                    </span><br>


            操作前开始时间：<span id="beforeStartTime">
           {{result.beforeStartTime }}
                    </span><br>


            操作前过期时间：<span id="beforeEndTime">
           {{result.beforeEndTime }}
                    </span><br>


            开始时间：<span id="startTime">
           {{result.startTime }}
                    </span><br>


            过期时间：<span id="endTime">
           {{result.endTime }}
                    </span><br>


            业务来源：<span id="businessSource" v-text="custBusinessSource(result.businessSource)">
                    </span><br>


            支付渠道：<span id="paymentChannel" v-text="custPaymentChannel(result.paymentChannel)">
                    </span><br>


            过期延期方式：<span id="overdueDelayWay" v-text="custOverdueDelayWay(result.overdueDelayWay)">
                    </span><br>


            备注信息：<span id="remark">
           {{result.remark }}
                    </span><br>

          </p>
        </td>
      </tr>
      <tr>
        <td style="width:90px;text-align: right;padding-top: 80px;">详细信息:</td>
        <td>
          <p style="float: left;">

            创建人id：<span id="createUserId">
           {{result.createUserId }}
                    </span><br>


            创建人名称：<span id="createUserName">
           {{result.createUserName }}
                    </span><br>
            创建时间：<span id="createTime">
           {{result.createTime }}
                    </span><br>
            月卡信息表id：<span id="monthlyCardId">
           {{result.monthlyCardId }}
                    </span><br>
            套餐id：<span id="packageId">
           {{result.packageId }}
                    </span><br>
            部门id：<span id="monthlyDepartmentId">
           {{result.monthlyDepartmentId }}
                    </span><br>
            通行权限id：<span id="throughAuthorityId">
           {{result.throughAuthorityId }}
                    </span><br>
          </p>
        </td>
      </tr>

      <tr>
        <td style="text-align: center;" colspan="10">
          <a-button type="primary" @click="close">关闭</a-button>
        </td>
      </tr>
    </table>

  </a-modal>
</template>

<script>
  import {httpAction} from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"

  export default {
    name: "MonthlyCardEditInfoModal",
    data() {
      return {
        title: "操作",
        visible: false,
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        result: {},
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {},
        url: {},
      }
    },
    created() {
    },
    methods: {
      edit(value) {
        this.result = value;
        this.visible = true;
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if (!this.model.id) {
              httpurl += this.url.add;
              method = 'post';
            } else {
              httpurl += this.url.edit;
              method = 'put';
            }
            let formData = Object.assign(this.model, values);
            //时间格式化
            formData.beforeStartTime = formData.beforeStartTime ? formData.beforeStartTime.format('YYYY-MM-DD HH:mm:ss') : null;
            formData.beforeEndTime = formData.beforeEndTime ? formData.beforeEndTime.format('YYYY-MM-DD HH:mm:ss') : null;
            formData.startTime = formData.startTime ? formData.startTime.format('YYYY-MM-DD HH:mm:ss') : null;
            formData.endTime = formData.endTime ? formData.endTime.format('YYYY-MM-DD HH:mm:ss') : null;
            formData.updateTime = formData.updateTime ? formData.updateTime.format('YYYY-MM-DD HH:mm:ss') : null;
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })


          }
        })
      },
      handleCancel() {
        this.close()
      },

      custOptionsType(t) {
        if (t === 1 || t === '1') {
          return '充值'
        } else if (t === 4 || t === '4') {
          return '报停'
        } else if (t === 2 || t === '2') {
          return '修改'
        } else if (t === 3 || t === '3') {
          return '延期'
        } else if (t === 5 || t === '5') {
          return '激活'
        } else if (t === 6 || t === '6') {
          return '注销'
        }
      },
        custBusinessSource(t) {
    if (t === 1 || t === '1') {
      return '人工'
    } else if (t === 2 || t === '2') {
      return '车主用户'
    } else if (t === 3 || t === '3') {
      return '第三方对接'
    }
  },
      custOverdueDelayWay(t) {
    if (t === 1 || t === '1') {
      return '顺延'
    } else if (t === 2 || t === '2') {
      return '跳延'
    }
  },

      custPaymentChannel(t) {
    if (t === 1 || t === '1') {
      return '现金'
    } else if (t === 2 || t === '2') {
      return '工行'
    } else if (t === 3 || t === '3') {
      return '微信'
    } else if (t === 4 || t === '4') {
      return '支付宝'
    }
  },
    }
  }
</script>

<style lang="less" scoped>

</style>